<template>
  <!-- 右边按钮 -->
  <div>
    <!-- 男款女款按钮区 -->
    <div class="rightTopBtn">
      <!-- 男款按钮区 -->
      <div class="modleBtn modelLoading1">
        <img
          :src="productGoodList[0].goodsOrderImage"
          :alt="productGoodList[0].goodsName"
          width="100%"
          :class="manStyle.imgStyle"
          @click="manClick"
        />
        <span :class="manStyle.spanStyle">{{
          productGoodList[0].goodsName
        }}</span>
      </div>
      <!-- 女款按钮区 -->
      <div class="modleBtn modelLoading2">
        <img
          :src="productGoodList[1].goodsOrderImage"
          :alt="productGoodList[1].goodsName"
          width="100%"
          :class="womenStyle.imgStyle"
          @click="womenClick"
        />
        <span :class="womenStyle.spanStyle">{{
          productGoodList[1].goodsName
        }}</span>
      </div>
    </div>
    <!-- 3D透视按钮区 -->
    <div class="rightBottomBtn">
      <div class="modleBtn">
        <img
          src="../images/perspective3d.png"
          alt="3D透视"
          width="100%"
          @click="perspectiveClick"
        />
        <span>3D透视</span>
      </div>
    </div>

    <div class="loading"><van-loading /></div>
  </div>
</template>

<script>
import * as v3dAppAPI from "../v3dApp/model.js";
export default {
  name: "rightBtn",
  data() {
    return {
      // 当前加载的模型,true为男款
      nowModel: true,
      // 男款样式
      manStyle: {
        imgStyle: "clickBtnImg",
        spanStyle: "clickBtnSpan",
      },
      // 女款样式
      womenStyle: {
        imgStyle: "",
        spanStyle: "",
      },
      // 是否播放动画
      isAnimation: false,
      // 款式列表
      productGoodList: [
        {
          goodsOrderImage: "",
        },
        {
          goodsOrderImage: "",
        },
      ],
    };
  },
  created() {
    let goodsId = this.getUrlKey("goodsId");
    // 设置默认选中女款
    if (goodsId == 2) {
      // 清除男款点击按钮样式
      this.manStyle.imgStyle = "";
      this.manStyle.spanStyle = "";
      // 添加女款点击按钮样式
      this.womenStyle.imgStyle = "clickBtnImg";
      this.womenStyle.spanStyle = "clickBtnSpan";
      // 取反
      this.nowModel = !this.nowModel;
    }
  },
  // 挂载完成
  mounted() {
    //给bus绑定自定义事件
    this.$bus.$on("getProductGoodList", (data) => {
      // console.log("getProductGoodList");
      // 接收款式列表数据
      console.log(data);
      this.productGoodList = data;
    });
  },
  //销毁之前
  beforeDestroy() {
    //给bus解绑自定义事件,千万别什么都不写,会解绑所有
    this.$bus.$off("getProductGoodList");
  },
  methods: {
    // 点击男款
    manClick() {
      //如果当前加载的是女款模型
      if (!this.nowModel) {
        // 清除女款点击按钮样式
        this.womenStyle.imgStyle = "";
        this.womenStyle.spanStyle = "";
        // 添加男款点击按钮样式
        this.manStyle.imgStyle = "clickBtnImg";
        this.manStyle.spanStyle = "clickBtnSpan";
        // console.log("加载男款模型");
        // v3dAppAPI.loadMan();
        //调用FooterFun绑定的自定义事件,并将数据发送过去
        this.$bus.$emit("initModel", "1");
        // 取反
        this.nowModel = !this.nowModel;
      }
    },
    // 点击女款
    womenClick() {
      //如果当前加载的是男款模型
      if (this.nowModel) {
        // 清除男款点击按钮样式
        this.manStyle.imgStyle = "";
        this.manStyle.spanStyle = "";
        // 添加女款点击按钮样式
        this.womenStyle.imgStyle = "clickBtnImg";
        this.womenStyle.spanStyle = "clickBtnSpan";
        // console.log("加载女款模型");
        //调用FooterFun绑定的自定义事件,并将数据发送过去
        this.$bus.$emit("initModel", "2");
        // 取反
        this.nowModel = !this.nowModel;
      }
    },
    // 点击3d透视
    perspectiveClick() {
      // console.log("3d透视");
      // if (!this.isAnimation) {
      //   console.log("打开");
      //   v3dAppAPI.playAnimation();
      // } else {
      //   console.log("关闭");
      //   v3dAppAPI.stopAnimation();
      // }
      v3dAppAPI.playAnimation();
      this.isAnimation = !this.isAnimation;
    },
  },
};
</script>

<style lang="less" scoped>
.rightTopBtn {
  z-index: 1002;
  position: absolute;
  width: 14.3%;
  height: auto;
  right: 4%;
  top: 14%;
  //   background-color: pink;
  .modleBtn {
    width: 100%;
    margin-bottom: 0.625rem;
    height: 50%;
    // background-color: purple;
    display: flex;
    align-items: center;
    flex-direction: column;
    img {
      background-color: white;
      border-radius: 0.625rem;
    }
    span {
      // display: inline-block;
      // margin-top: 0.125rem;
      font-size: 0.875rem;
    }
  }
}

.rightBottomBtn {
  position: absolute;
  width: 14.3%;
  height: auto;
  right: 4%;
  top: 54%;
  display: flex;
  justify-content: center;

  // background-color: pink;
  .modleBtn {
    width: 75%;
    height: 50%;
    // background-color: purple;
    // display: flex;
    // align-items: center;
    // flex-direction: column;
    span {
      // display: inline-block;
      font-size: 0.875rem;
      white-space: nowrap;
      color: #5d000b;
      font-weight: bold;
    }
  }
}

.clickBtnImg {
  border: solid 1px #fc7867;
}
.clickBtnSpan {
  color: #fc7867;
}

.loading {
  width: 100%;
  height: 70%;
  position: absolute;
  top: 0;
  // background-color: rgba(89, 89, 89, .5);
  display: none;
}
.van-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

@media (min-width: 768px) {
  .rightBottomBtn .modleBtn span {
    font-size: 1.625rem;
  }
  .rightTopBtn .modleBtn span {
    font-size: 1.375rem;
  }
}
@media (min-width: 1024px) {
  .rightBottomBtn .modleBtn span {
    font-size: 2.125rem;
  }
  .rightTopBtn .modleBtn span {
    font-size: 1.75rem;
  }
}
@media (max-width: 320px) {
  .rightBottomBtn .modleBtn span {
    font-size: 0.75rem;
  }
  .rightTopBtn .modleBtn span {
    font-size: 0.75rem;
  }
}
</style>